<template>
<el-card>
    <el-tabs>
        <el-tab-pane label="报表配置">
            <div style="display: flex; flex-direction: row">
                <div style="flex: 1">
                    <h5>config</h5>
                    <code-editor ref="editor" class="editor h-100" v-model="data.code"
                                 style="flex: 1; height: 700px;"
                                 language="groovy" theme="dracula"></code-editor>
                </div>
                <div style="flex: 1; margin-left: 20px;">
                    <h5>参数</h5>
                    <el-form label-width="100px">
                        <el-form-item v-for="(v,k) in params" :label="k">
                            <el-input v-model="params[k]" />
                        </el-form-item>
                    </el-form>
                    <div style="margin-top: 20px; text-align: center">
                        <el-button @click="make" type="primary">生成报表</el-button>
                      <el-button @click="saveSetting" type="primary">保存配置</el-button>
                      <el-button @click="loadSetting" type="primary">载入配置</el-button>
                    </div>
                </div>
            </div>

        </el-tab-pane>
        <el-tab-pane label="数据源配置">
            <el-form style="width: 700px;" label-width="100px">
                <el-form-item label="url">
                    <el-input v-model="dataSource.url"/>
                </el-form-item>
                <el-form-item label="driver">
                    <el-input v-model="dataSource.driver"/>
                </el-form-item>
                <el-form-item label="username">
                    <el-input v-model="dataSource.username"/>
                </el-form-item>
                <el-form-item label="password">
                    <el-input v-model="dataSource.password"/>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</el-card>
</template>

<script>
    import CodeEditor from "../../code-editor";
    import fileDownload from "js-file-download";
    import Test from "./test"

    function download(fileName,txt) {
      var filename = fileName + '.conf';
      var pom = document.createElement('a');
      pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(txt));
      pom.setAttribute('download', filename);

      if (document.createEvent) {
        var event = document.createEvent('MouseEvents');
        event.initEvent('click', true, true);
        pom.dispatchEvent(event);
      }
      else {
        pom.click();
      }
    }

    export default {
        name: "report-maker",
        components: {CodeEditor},
        data(){
            return {
                dataSource: {
                    url:"jdbc:mysql://121.4.170.37:3306/test?autoReconnect=true&amp;useUnicode=true&amp;characterEncoding=utf-8",
                    driver:"com.mysql.jdbc.Driver",
                    username:"root",
                    password:"1q2w3e4r"
                },
                data:{
                    code: Test
                },
                params:{}
            }
        },
        watch:{
            "data.code":{
                immediate: true,
                handler(nv){
                    var params = {}
                    var items = nv.match(/\#\{(.+?)\}/g)
                  if(items){
                    items.forEach(e => {
                      params[e.substring(2,e.length - 1)] = ""
                    })
                  }
                    this.params = params
                }
            }
        },
        methods:{
          saveSetting(){
            var name=prompt("输入要保存的配置名","")
            if(!name){
              return
            }
              var t = this;
              var txt = JSON.stringify({
                code: t.data.code,
                dataSource: t.dataSource,
              })
            download(name, txt)
          },
          loadSetting(){
            var t = this
            var elem = document.createElement("input")
            elem.type = "file"
            elem.onchange = function (e){
              var file = e.target.files[0]
              var fr = new FileReader()
              fr.onload = function (ee){
                var txt = ee.target.result
                var config = JSON.parse(txt)
                console.log(config)
                t.dataSource = Object.assign(t.dataSource, config.dataSource)
                t.data.code = config.code
              }
              fr.readAsText(file, "utf-8")
            }
            elem.click()
          },
            make(){
                var t = this;
                $.ajax({
                    url: "/api/tools/report-maker/make",
                    type:"post",
                    data:JSON.stringify({
                        code: t.data.code,
                        dataSource: t.dataSource,
                        params: t.params
                    }),
                    contentType:"application/json",
                    xhr: function () {
                        var xhr = new XMLHttpRequest()
                        xhr.responseType = 'blob'
                        return xhr
                    },
                    success(data){
                        fileDownload(data, 'report.xlsx');
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
